<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>天猫tmall</title>
        <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
        <style type="text/css">
            body{
                margin: 0;
                padding: 0;
            }
            .header{
                height: 130px;
                background-color: #00F7DE;
            }
            .logo{
                width: 240px;
                height: 130px;
                background-image: url("tmall-logo.png");
                background-repeat: no-repeat;
                background-size: cover;
                float: left;
                margin-left: 110px;
            }
            .search{
                width: 625px;
                height: 36px;
                border: 2px solid red;
                float: left;
                margin: 40px 0 0 100px;
                background-color: #dedede;
            }
            .search input{
                width: 483px;
                height: 26px;
                padding: 5px 3px 5px 5px;
                font-size: 14px;
                color: #dedede;
                border: none;
                outline: none;
                float: left;
            }
            .search button{
                width: 134px;
                height: 36px;
                background-color: red;
                color: white;
                font-size: 18px;
                border: none;
                float: left;
                cursor: pointer;
            }
            .main-nav{
                width: 1230px;
                height: 35px;
                margin:0 130px;
            }
            .main-nav .category{
                width: 200px;
                height: 35px;
                background-color: red;
                float: left;
            }
            .main-nav .category .icon1{
                width: 16px;
                height: 36px;
                color: white;
                margin-left: 14px;
                font-size: 16px;
                line-height: 36px;
            }
            .main-nav .category .text{
                width: 64px;
                height: 36px;
                font-size: 16px;
                font-weight: 700;
                line-height: 36px;
                color: white;
                margin-left: 8px;
            }
            .inner-con{
                width: 1030px;
                height: 35px;
                float: left;

            }
            .inner-con tmall-shop{
                display: block;
                width: 116px;
                height: 35px;
            }
            .inner-con img{
                width: 100px;
                height: 30px;
                margin-top: 2.5px;
            }
            .inner-con a{
                display: block;
                float: left;
                margin-left: 16px;
                height: 35px;
                line-height: 35px;
                text-decoration: none;
                color: #333333;
                font-size: 16px;
            }
            .inner-con>a:hover{
                color: red;
            }
            .container{
                width: 100%;
                height: 500px;
                background-color: #dddeac;
                border-top: 2px solid red;
            }
            .normal-nav{
                width: 200px;
                height: 500px;
                margin-left: 130px;
                background-color: #505050;
                position: relative;/*让孙子nav-content相对于我定位*/
            }
            .normal-nav .nav-item{
                width: 200px;
                height: 31.2px;
                line-height: 31.2px;
                color: white;
                font-size: 14px;
            }
            .normal-nav .nav-item .icon{
                width: 16px;
                height: 31px;
                margin: 0 4px 0 14px;
                color: white;
                font-size: 16px;
            }
            .normal-nav .nav-item .words{
                text-decoration: none;
                color: white;
                font-size: 14px;
            }
            .nav-item:hover{
                background-color: white;
                color: red;
                font-weight: bold;
            }
            .nav-item:hover .icon{
                color: red;
                font-weight: bold;
            }
            .nav-item:hover .words{
                color: red;
                font-weight: bold;
            }
            .nav-content{
                width: 852px;
                height: 500px;
                background-color: #19b955;
                position: absolute;
                top:0;
                left: 200px;
                display: none;
            }
            .nav-item:hover .nav-content{
                display: block;
            }
            .bottom{
                width: 100%;
                height: 1200px;
                background-color: #f2f2f2;
            }
            .brands{
                width: 1230px;
                height: 327px;
                margin:50px 0 0 130px;
                display: inline-block;
            }
            .brand-item{
                width: 122px;
                height: 108px;
                margin-right: 1px;
                margin-bottom: 1px;
                background-color: #fff;
                float: left;
                position: relative;
            }
            .brand-img{
                width: 122px;
                height: 108px;
                overflow: hidden;
            }
            .brand-img img{
                width: 82%;
                height: 50px;
                margin: 27px auto;
                display: block;
                text-align: center;
                background-color: #fff;
            }
            .brand-mask{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,.8);
                text-decoration: none;
                display: none;
            }
            .brand-item:hover .brand-mask{
                display: block;
            }
            .brand-mask .coupon{
                color: #fff;
                text-align: center;
                line-height: 90px;
                height: 60px;
                font-size: 12px;
            }
            .brand-mask .enter{
                text-align: center;
                height: 32px;
                font-size: 12px;
            }
            .brand-mask .enter span{
                display: inline-block;
                color: #fff;
                width: 63px;
                height: 18px;
                font-size: 12px;
                line-height: 15px;
                background-color: #FF0036;
                border-radius: 9px;
            }
            .brand-item-ending{
                width: 122px;
                height: 108px;
                display: block;
                text-decoration: none;
                color: #999;
            }
            .brand-item:hover{
                background-color: red;
            }
            .brand-item:hover .brand-item-ending{
                color: white;
            }
            .brand-item-ending .repeat{
                width: 40px;
                height: 40px;
                display: block;
                margin: 20px 41px 0px 41px;
                font-size: 30px;
                text-align: center;
                line-height: 38px;
                border-radius: 20px;
            }
            .brand-item-ending .hyp{
                display: block;
                font-size: 14px;
                text-align: center;
                margin: 0 40px 0 40px;
            }
            .nav-bar{
                width: 35px;
                height: 369px;
                position:fixed;
                bottom:56px;
                left:95px;
            }
            .nav-bar-item{
                display: block;
                width: 36px;
                height: 36px;
                text-decoration: none;
                margin-top: 1px;
                color: white;
                line-height: 36px;
                text-align: center;
                font-size: 12px;
                background-color: rgba(0,0,0,.6);
            }
            .nav-bar-item:hover{
                background-color: #ffbce1;
            }
            .nav-bar-item-content{
                width: 24px;
                height: 28px;
                line-height: 12px;
                margin: 6px auto;
                display: inline-block;
            }
            .arrow{
                display: block;
                font-size: 18px;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <div class="logo"></div>
            <div class="search">
                <input type="text" placeholder="搜索&nbsp;天猫&nbsp;商品/品牌/店铺">
                <button>搜索</button>
            </div>
        </div>
        <div class="main-nav">
            <div class="category">
                <span class="icon1 fa fa-navicon"></span>
                <span class="text">商品分类</span>
            </div>

            <div class="inner-con">
                <a href="" class="tmall-shop">
                    <img src="tmall-shop.png">
                </a>
                <a href="" class="tmall-shop">
                    <img src="tamll-international.png">
                </a>
                <a href="" class="name">天猫会员</a>
                <a href="" class="name">电器城</a>
                <a href="" class="name">喵生鲜</a>
                <a href="" class="name">医药馆</a>
                <a href="" class="name">营业厅</a>
                <a href="" class="name">魅力惠</a>
                <a href="" class="name">飞猪旅行</a>
                <a href="" class="name">苏宁易购</a>
            </div>
        </div>

        <div class="container">
            <div class="normal-nav">
                <div class="nav-item">
                    <span class="icon fa fa-female"></span>
                    <a href="" class="words">女装</a>
                    /
                    <a href="" class="words">内衣</a>
                    <div class="nav-content"></div>
                </div>
                <div class="nav-item">
                    <span class="icon fa fa-male"></span>
                    <a href="" class="words">男装</a>
                    /
                    <a href="" class="words">运动户外</a>
                    <div class="nav-content" style="background-color: yellow"></div>
                </div>
                <div class="nav-item">
                    <span class="icon fa fa-suitcase"></span>
                    <a href="" class="words">女鞋</a>
                    /
                    <a href="" class="words">男鞋</a>
                    /
                    <a href="" class="words">箱包</a>
                    <div class="nav-content" style="background-color: #ff873c"></div>
                </div>
                <div class="nav-item">
                    <span class="icon fa fa-eye"></span>
                    <a href="" class="words">美妆</a>
                    /
                    <a href="" class="words">个人护理</a>
                    <div class="nav-content" style="background-color: #ff070b"></div>
                </div>
                <div class="nav-item">
                    <span class="icon fa fa-diamond"></span>
                    <a href="" class="words">腕表</a>
                    /
                    <a href="" class="words">珠宝</a>
                    /
                    <a href="" class="words">眼镜</a>
                    <div class="nav-content" style="background-color: #ff1a83"></div>
                </div>
                <div class="nav-item">
                    <span class="icon fa fa-phone"></span>
                    <a href="" class="words">手机</a>
                    /
                    <a href="" class="words">数码</a>
                    /
                    <a href="" class="words">电脑办公</a>
                    <div class="nav-content" style="background-color: #9222ff"></div>
                </div>
                <div class="nav-item">
                    <span class="icon fa fa-gift"></span>
                    <a href="" class="words">母婴玩具</a>
                    <div class="nav-content" style="background-color: #2c2dff"></div>
                </div>
                <div class="nav-item">
                    <span class="icon fa fa-spoon"></span>
                    <a href="" class="words">零食</a>
                    /
                    <a href="" class="words">茶酒</a>
                    /
                    <a href="" class="words">进口食品</a>
                    <div class="nav-content" style="background-color: #ff82e2"></div>
                </div>
                <div class="nav-item">
                    <span class="icon fa fa-bicycle"></span>
                    <a href="" class="words">生鲜水果</a>
                    <div class="nav-content" style="background-color: #b2ffc7"></div>
                </div>
                <div class="nav-item">
                    <span class="icon fa fa-camera"></span>
                    <a href="" class="words">大家电</a>
                    /
                    <a href="" class="words">生活电器</a>
                    <div class="nav-content" style="background-color: #d3ff56"></div>
                </div>
                <div class="nav-item">
                    <span class="icon fa fa-hotel"></span>
                    <a href="" class="words">家具建材</a>
                    <div class="nav-content" style="background-color: #46feff"></div>
                </div>
                <div class="nav-item">
                    <span class="icon fa fa-car"></span>
                    <a href="" class="words">汽车</a>
                    /
                    <a href="" class="words">配件</a>
                    /
                    <a href="" class="words">用品</a>
                    <div class="nav-content" style="background-color: #ff59b0"></div>
                </div>
                <div class="nav-item">
                    <span class="icon fa fa-leaf"></span>
                    <a href="" class="words">家纺</a>
                    /
                    <a href="" class="words">家饰</a>
                    /
                    <a href="" class="words">鲜花</a>
                    <div class="nav-content" style="background-color: #e6ff3f"></div>
                </div>
                <div class="nav-item">
                    <span class="icon fa fa-medkit"></span>
                    <a href="" class="words">医药保健</a>
                    <div class="nav-content" style="background-color: #47ff28"></div>
                </div>
                <div class="nav-item">
                    <span class="icon fa fa-shower"></span>
                    <a href="" class="words">厨具</a>
                    /
                    <a href="" class="words">收纳</a>
                    /
                    <a href="" class="words">宠物</a>
                    <div class="nav-content" style="background-color: #b044ff"></div>
                </div>
                <div class="nav-item">
                    <span class="icon fa fa-book"></span>
                    <a href="" class="words">图书</a>
                    /
                    <a href="" class="words">音像</a>
                    <div class="nav-content" style="background-color: #ff9c79"></div>
                </div>
            </div>
        </div>

        <div class="bottom">
            <div class="brands">
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand1.png">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand1.png">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand1.png">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand1.png">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand1.png">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand1.png">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand1.png">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand1.png">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand1.png">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand1.png">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand2.png">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand2.png">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand2.png">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand2.png">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand2.png">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand2.png">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand2.png">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand2.png">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand2.png">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand2.png">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand3.webp">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand3.webp">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand3.webp">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand3.webp">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand3.webp">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand3.webp">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand3.webp">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand3.webp">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <div class="brand-img">
                        <img src="brand3.webp">
                    </div>
                    <a href="" class="brand-mask">
                        <div class="coupon">
                            <span>优惠券 ￥200</span>
                        </div>
                        <div class="enter">
                            <span>点击进入</span>
                        </div>
                    </a>
                </div>
                <div class="brand-item">
                    <a href="" class="brand-item-ending">
                        <span class="repeat fa fa-repeat"></span>
                        <span class="hyp">换一批</span>
                    </a>

                </div>
            </div>
        </div>
        <div class="nav-bar">
            <a href="" class="nav-bar-item" style="background-color: red">
                <div class="nav-bar-item-content">导航</div>
            </a>
            <a href="" class="nav-bar-item">
                <div class="nav-bar-item-content">天猫超市</div>
            </a>
            <a href="" class="nav-bar-item">
                <div class="nav-bar-item-content">天猫国际</div>
            </a>
            <a href="" class="nav-bar-item">
                <div class="nav-bar-item-content">美丽人生</div>
            </a>
            <a href="" class="nav-bar-item">
                <div class="nav-bar-item-content">潮店酷玩</div>
            </a>
            <a href="" class="nav-bar-item">
                <div class="nav-bar-item-content">居家生活</div>
            </a>
            <a href="" class="nav-bar-item">
                <div class="nav-bar-item-content">打造爱巢</div>
            </a>
            <a href="" class="nav-bar-item">
                <div class="nav-bar-item-content">户外出行</div>
            </a>
            <a href="" class="nav-bar-item">
                <div class="nav-bar-item-content">猜你喜欢</div>
            </a>
            <a href="" class="nav-bar-item"  style="background-color: #aaaaaa">
                <div class="nav-bar-item-content" style="margin: 1px auto">
                    <span class="arrow fa fa-angle-up"></span>
                    顶部
                </div>
            </a>
        </div>
    </body>
</html>